<template>
    <div class="buttonWrapper" @click="listener($event)">
        <div id="DCJ">
            <KindofButton :kindof="{color:'#2dff01',text:'定操',}"></KindofButton>
            <div class="title">定操按钮</div>
        </div>
        <div id="SJ">
            <keyButton></keyButton>
            <div class="title">SJ按钮</div>
        </div>
        <div id="FCJ">
            <KindofButton :kindof="{color:'#f6ff00',text:'反操',}"></KindofButton>
            <div class="title">反操按钮</div>
        </div>
        <div id="LJ">
            <KindofButton :kindof="{color:'#00fe74',text:'LJ',}"></KindofButton>
            <div class="title">LJ按钮</div>
        </div>
        <div id="UJ">
            <KindofButton :kindof="{color:'#f7f786',text:'UJ',}"></KindofButton>
            <div class="title">UJ按钮</div>
        </div>
        <div id="YXJ">
            <KindofButton :kindof="{color:'#b7b8b7',text:'YXJ',}"></KindofButton>
            <div class="title">YXJ按钮</div>
        </div>
        <div id="MJ">
            <KindofButton :kindof="{color:'#ff9d00',text:'MJ',}"></KindofButton>
            <div class="title">MJ按钮</div>
        </div>
        <div id="stop">
            <stopButton></stopButton>
            <div class="title">紧急停车按钮</div>
        </div>
        <!--        <div>-->
        <!--            <AllChoiceButton></AllChoiceButton>-->
        <!--            <div class="title">全部触发按钮</div>-->
        <!--        </div>-->
        <div @click.stop="choicetask" class="choicetask">
            <KindofButton :kindof="{color:'#d4d4d4',text:'选择试卷',}"></KindofButton>
            <div class="title">选择试题</div>
        </div>
        <div @click.stop="submittask" class="submittask">
            <KindofButton :kindof="{color:'#0037ff',text:'提交试卷',}"></KindofButton>
            <div class="title">提交试卷</div>
        </div>
        <div @click.stop="reset" class="reset">
            <KindofButton :kindof="{color:'#86f7b9',text:'复位',}"></KindofButton>
            <div class="title">复位</div>
        </div>
        <el-dialog
            title="请填写试卷的详细信息"
            v-model="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <div
                style="width: 100%"
                v-if="kindofForm === 'checktest'"
            >
                <el-table :data="taskShow"
                          style="width: 100%"
                          row-key="id"
                          :expand-row-keys="expands"
                          @expand-change="expandChange"
                          ref="refTable">
                    <el-table-column type="expand">
                        <template #default="props">
                            <h1>线:点</h1>
                            <div m="4">
                                <p m="t-0 b-2" v-for="(item,i) in FormtText" :key="i+'FormtText'">
                                   {{ item }}
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建日期" width="200"/>
                    <el-table-column prop="name" label="试卷名" width="100"/>
                    <el-table-column prop="timeF" label="时间" width="100"/>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="handleEdit(scope.$index, scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div
                style="width: 100%"
                v-if="kindofForm === 'submittest'">
                <div>试题的题目:{{taskItem.name}}</div>
                <div>检查故障点:{{taskItem.content}},共记{{taskItem.content.length}}个</div>
                <div>核查故障点:{{operate.content}}个,共记{{operate.content.length}}个</div>
                <div>核查对{{operate.right}}个;差错{{ operate.fault}}个;漏查{{operate.less}}个；多查{{operate.more}}个</div>
                <el-input placeholder="请输入姓名"></el-input>
<!--                <div>总共用时{{}}</div>-->
<!--                <div>得分{{}}</div>-->
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancle">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import stopButton from '@/components/custombutton/stopButton.vue'
import AllChoiceButton from "@/components/custombutton/allChoiceButton.vue";
import keyButton from "@/components/custombutton/keyButton.vue";
import KindofButton from '@/components/custombutton/KindofButton.vue'
import {GetAllExam, GetAnExamByExamID, SetFaultByExamID} from "../api/ajax";
import {ref} from "vue";
import bus from "vue3-eventbus";
import dayjs from "dayjs";
import {useStore} from "vuex";
import {getCurrentInstance} from "vue";
const store = useStore();
let ws = getCurrentInstance().proxy.$ws;
components:{
    stopButton, AllChoiceButton, keyButton, KindofButton
}
;

let dialogVisible = ref(false)
let taskShow = ref([])
let kindofForm = ref(null)

function listener(e){
    let id = e.path[2].getAttribute('id')
    console.log(id)
    if(id === null){
        alert('不要点边界,点中间白色区域！')
    }else{
        let  a = {order:"SetRelay",data:{relay:id,"state":true}}
        ws.send(JSON.stringify(a));
    }
}
async function choicetask() {
    dialogVisible.value = true
    kindofForm.value = 'checktest'
    try {
        let res = await GetAllExam();
        console.log(res);
        res.data.data.forEach(item => {
            console.log(item);
            taskShow.value.push({
                id: item.examId,
                name: item.examName,
                timeF: dayjs(JSON.parse(item.examContent).time).add(-8, "hour").format("HH:mm:ss"),
                time: JSON.parse(item.examContent).time,
                createTime:item.createTime,
                content: JSON.parse(item.examContent).content
            })
        })
        console.log('taskShow->', taskShow.value)
    } catch (err) {
        console.log('err', err)
    }
}

function handleClose() {
    dialogVisible.value = false
    cancle()
}

//取消
function cancle() {
    dialogVisible.value = false
    if (kindofForm.value === 'checktest') {
        taskShow.value = [];
    }
}

let expands = ref([])
let FormtText = ref([])

async function expandChange(row, expandedRows) {
    if (expandedRows.length === 1) {
        let res = await GetAnExamByExamID({examID: row.id})
        FormtText.value = res.data.data.lineDescribe
        expandedRows.shift()
    } else {
        console.log('FUN')
    }
}

async function handleEdit(value, value2) {
    try {
        console.log('value2->',value2);
        localStorage.setItem("taskItem", JSON.stringify({name: value2.name, content: value2.content}));
        let a = await SetFaultByExamID({examID: value2.id})
        console.log(value2.time)
        bus.emit('foo', value2.time)
        cancle()
        alert('试卷已初始化完成！请手动计时开始')
    } catch (err) {
        console.log(err)
    }
}

let taskItem = ref(null)
let faultpoint = ref(null)
let operate = ref({fault:0,time:'',right:0,more:0,less:0,content:[]})
async function submittask() {
    if(JSON.parse(localStorage.getItem('taskItem'))){
        dialogVisible.value = true
        kindofForm.value = 'submittest'
        taskItem.value = JSON.parse(localStorage.getItem("taskItem"))
        operate.value.content = store.state.task.taskArr
        if(operate.value.content.length <  taskItem.value.content.length){
            operate.value.more = 0
            operate.value.less = taskItem.value.content.length - operate.value.content.length
            operate.value.fault = taskItem.value.content.filter(item=>{return operate.value.content.indexOf(item) === -1}).length
            operate.value.right = taskItem.value.content.length - operate.value.fault
        }else if(operate.value.content.length >  taskItem.value.content.length){
            console.log('operate.value.content.length',operate.value.content.length)
            operate.value.less = 0
            operate.value.more = operate.value.content.length - taskItem.value.content.length
            operate.value.right = operate.value.content.filter(item=>{return taskItem.value.content.indexOf(item) !== -1}).length
            operate.value.fault = operate.value.content.length - operate.value.right
        }else{
            operate.value.less = 0
            operate.value.more = 0
            operate.value.right = operate.value.content.filter(item=>{return taskItem.value.content.indexOf(item) !== -1}).length
            operate.value.fault = operate.value.content.length - operate.value.right
        }
    }else{
        alert('考试之前，请选择试卷！')
    }
}


function reset() {
    store.commit('task/reset')
    localStorage.clear();
    operate.value = {fault:0,time:'',right:0,more:0,less:0,content:[]}
    taskItem.value = [];
    taskShow.value = [];
    bus.emit('reset');
    alert('已复位')
}
</script>

<style scoped lang="scss">
.buttonWrapper {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    .title {
        color: #ffffff;
        text-align: center;
    }
}

</style>
